<template>
    <div id="userEdit">
        <Modal
            v-model="user.userEditModalSta"
            title="编辑用户"
            :loading="loading"
            @on-ok="userEditOk"
            @on-cancel="userEditCancel"
        >
            <Row>
                <Col :span="20">
                    <Form
                        ref="userEditForm"
                        :model="user.userOneSta"
                        :rules="userEditRule"
                        label-position="right"
                        :label-width="100"
                    >
                        <FormItem label="用户ID" prop="id">
                            <Input v-model="user.userOneSta.id" disabled></Input>
                        </FormItem>
                        <FormItem label="用户名" prop="name">
                            <Input v-model="user.userOneSta.name"></Input>
                        </FormItem>
                        <FormItem label="密码" prop="password">
                            <Input type="password" v-model="user.userOneSta.password"></Input>
                        </FormItem>
                        <FormItem label="确认密码" prop="verifyPassword">
                            <Input type="password" v-model="user.userOneSta.verifyPassword"></Input>
                        </FormItem>
                    </Form>
                </Col>
            </Row>
        </Modal>
    </div>
</template>
<script>
export default {
    name: "UserEdit",
    data() {
        //确认密码
        const verifyPasswordRuleFn = (rule, value, callback) => {
            if (value == "") {
                callback(new Error("请确认新密码"));
            } else if (value != this.user.userOneSta.password) {
                callback(new Error("确认密码和密码不一致"));
            } else {
                callback();
            }
        };
        return {
            loading: true,
            userEditForm: {
                id: "",
                name: "",
                password: "",
                verifyPassword: ""
            },
            //表单验证规则
            userEditRule: {
                id: {
                    required: true,
                    message: "请输入用户名",
                    trigger: "blur"
                },
                name: {
                    required: true,
                    message: "请输入用户名",
                    trigger: "blur"
                },
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    }
                ],
                verifyPassword: [
                    {
                        required: true,
                        validator: verifyPasswordRuleFn,
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created() {},
    mounted() {},
    computed: {},
    methods: {
        //提交
        userEditOk() {
            let _self = this;
            this.$refs["userEditForm"].validate(valid => {
                if (valid) {
                    setTimeout(() => {
                        let obj = this.$qs.stringify({
                            id: this.user.userOneSta.id,
                            name: this.user.userOneSta.name,
                            password: this.user.userOneSta.password,
                            crtime: this.user.userOneSta.crtime,
                            chtime: new Date()
                        });
                        //根据用户id获取用户角色
                        this.$axios
                            .post("/acl_user/updateUser", obj)
                            .then(res => {
                                if (res.data) {
                                    _self.userEditModalMut({
                                        state: false
                                    }); //关闭模态框
                                    _self.userListUpdateOneMut({
                                        state: res.data
                                    }); //更新数据
                                    _self.$refs["userEditForm"].resetFields(); //清空表单
                                }
                            });
                    }, 1000);
                } else {
                    //动画
                    this.loading = false;
                    this.$nextTick(() => {
                        this.loading = true;
                    });
                }
            });
        },
        //取消
        userEditCancel() {
            this.$refs["userEditForm"].resetFields();
        }
    },
    components: {}
};
</script>
